<script setup lang="ts">
import { ref, watch } from "vue";

import router from "./router";
import TopMenu from "./components/TopMenu.vue";
import { useRoute } from "vue-router";

const selectedIndexPage: any = ref("首页");
const route = useRoute();
// console.log(route, 11)
// console.log(route.query, 222)
// console.log((route.query), 8888)
// console.log(route, 333)
// setTimeout(() => {
//   console.log('____________________________');
//   console.log(route.query.mainTopIndexNavigation, 199, 1000);
//   console.log('____________________________')
// })

const printNum = (name: any) => {
  console.log(`namenamenamenamenamenamenamenamename${name}`);

  selectedIndexPage.value = name;
  //
  if (name === "首") {
  }

  if (name === "学") {
    return;
  }

  if (name === "管") {
    router.push({
      path: "/manager/managerNavigation",
      query: {
        mainTopIndexNavigation: 5,
        leftMenuIndex: 0,
        leftMenuType: 1,
      },
    });
    return;
  }

  if(name === '考'){
    router.push({
      path: "/examination/examinationNavigation",
      query: {
        mainTopIndexNavigation: 3,
        leftMenuIndex: 0,
        leftMenuType: 1,
      },
    });
    return;
  }

  if (name === "培训任务学习") {
  } else {
  }
  if (name === "个人职业生命学习") {
  } else {
  }

  if (name === "课件资源") {
  } else {
  }

  if (name === "题库资源") {
  } else {
  }

  switch (name) {
    case "首页":
      router.push({
        path: "/",
        query: {
          mainTopIndexNavigation: 0,
        },
      });
      break;
    case "学":
      console.log("dddddd");
      // router.push('/LearnIndex/id=1');
      break;
    case "练":
      router.push({
        path: "/practice/practiceNavigation",
        query: {
          mainTopIndexNavigation: 2,
          leftMenuIndex:0,
        },
      });
      break;
    case "管":
      break;

    case "个人职业生命学习":
      ///'/LearnIndex/learnCareerLeftNavigation?mainTopIndexNavigation=1$leftMenuIndex=0'
      router.push({
        path: "/LearnIndex/learnCareerLeftNavigation",
        query: {
          mainTopIndexNavigation: 1,
          leftMenuIndex: 0,
          stationIndex: 0,
        },
      });
      break;
    case "培训任务学习":
      router.push({
        path: "/TrainingLearnIndex/learnTaskNavigation",
        query: {
          mainTopIndexNavigation: 1,
          leftMenuIndex: 0,
        },
      });
      break;
    case "题库资源":
      router.push({
        path: "/QuestionBankResource",
        query: {
          mainTopIndexNavigation: 1,
          leftMenuIndex: 0,
        },
      });
      break;
    case "课件资源":
      router.push({
        path: "/TrainingLearnTaskIndex/learnNavigation",
        query: {
          mainTopIndexNavigation: 1, ///Top对应的菜单
          leftMenuIndex: 0, ///左菜单的Index
          positionMenuIndex: 0, ///职位选择
        },
      });
      break;
    case "规章管理":
      router.push({
        path: "/regulations",
        query: {
          mainTopIndexNavigation: 1, ///Top对应的菜单
          leftMenuIndex: 0, ///左菜单的Index
          positionMenuIndex: 0, ///职位选择
          leftMenuType: 0,
        },
      });
      break;
  }
};
///监听路由变化
watch(
  () => route,
  (to, from) => {
    console.log("路由变化了", to.query);
    // rootLeftMenuHander(to.query.leftMenu);
    // 路由变化时的逻辑处理
  },
  { immediate: true }
);
// onMounted(()=>{
//   console.log('首页被重新加载了')
// })
</script>

<template>
  <div class="root_main_body_style">
    <el-container class="rootStyle">
      <el-header style="z-index: 10000">
        <TopMenu @ccc="printNum" />
      </el-header>
      <el-container class="body">
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.root_main_body_style {
  background-color: #f6fbff;
}

.style_left_menu {
  border-radius: 10px 10px 10px 10px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  background: linear-gradient(180deg, #004373 0%, #012b4b 100%);
}

.style_left_menu_learnCareer {
  border-radius: 10px 10px 10px 10px;
  background-color: #cbe9ff;
}

/*去掉边距*/
.el-main {
  padding: 0px !important;
}

.el-aside {
  --el-aside-width: 230px;
}

.rootStyle {
  left: 0;
  margin-bottom: 25px;
  margin-top: 20px;
}

.el-header {
  display: flex;
  position: fixed; /*页面被滚动也停留在相同的位置*/
  top: 0;
  left: -10px;
  color: blue;
  --el-header-padding: 0;
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  padding: 0px !important;
}

.body {
  width: calc(100vw - 45px); /* 原始宽度减去 30px 的间距 */
  margin-top: 34px;
  border-radius: 6px 6px 6px 6px;
  /*height: 100vh;打开后首页回出问题*/
}

.el-main {
  padding: 0;
  margin: 0;
}

.body_main_menu {
  background-color: #ffffff; /* Element Plus main color */
}
</style>
